<template>
  <vex-table
    ref="table"
    :columns="columns"
    :show-toolbar="false"
    :fetch="getTableAsync"
    @vue:mounted="() => $refs.table.load()"
  >
    <template #head_img_url="{ scope }">
      <avatar-card :encryptConfirmed="true" :src="scope.head_img_url" style="width: 100%" />
    </template>
    <template #action="{ scope }">
      <a-button type="link" @click="peopleDetails(scope)">详情</a-button>
    </template>
  </vex-table>
</template>

<script>
import AvatarCard from '@gis/lib/components/img-viewer/avatar-card.vue';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { homestayWarningOccupancy } from '@gis/lib/api';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { getEnumText } from '@gis/lib/enums/index.js';
import { openPeopleDetailsDialog } from '../reality-people/people-details/peopleDetailsDialog.js';

export default {
  name: 'net-register-people-list',
  mixins: [areaCodeMixin],
  components: { AvatarCard },
  data() {
    return {
      columns: [
        {
          title: '头像',
          dataIndex: 'head_img_url',
          scopedSlots: { customRender: 'head_img_url' },
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          width: 60,
          customRender: (v) => getEnumText('gender', v),
        },
        {
          title: '入住房间',
          dataIndex: 'room_full_name',
        },
        {
          title: '入住时间',
          dataIndex: 'create_time',
        },
        {
          title: '预离时间',
          dataIndex: 'end_time',
        },
        {
          title: '登记来源',
          dataIndex: 'source',
          customRender: (val) => getEnumText('registerSource', val),
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 80,
        },
      ],
    };
  },
  methods: {
    peopleDetails(data) {
      openPeopleDetailsDialog(data, ['7']);
    },
    async getTableAsync(params) {
      const { area_code } = useUserInfoStore();
      params = Object.assign({}, params, { area_code: area_code, status: 1 });
      return await handleTableRes(homestayWarningOccupancy(params));
    },
  },
};
</script>

<style scoped></style>
